<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- hash路由 -->
    <div class="nav">
        <a href="#/home">首页</a>
        <a href="#/service">服务</a>
        <a href="#/mine">个人中心</a>
    </div>

    <!-- history路由 -->
    <!-- <div class="nav">
        <a href="/home">首页</a>
        <a href="/service">服务</a>
        <a href="/mine">个人中心</a>
    </div> -->

    <div class="content"></div>
</body>

</html>
<script>
    /* 单页面路由 ：
    1. 整个应用只是用一个html文档实现
    2.单页路由——随着url地址的变化，动态更新网页（html文档）的内容
    */
    /* 前端路由：前端路由，主要关注的是url地址的变化和对应资源的关系
    前端路由一般由前端程序员来维护 
    方案一 ： hash路由
    方案二：history路由*/
    /*  后端路由：后端路由中，主要关注的是url地址变化和后端数据的关系
    后端路由一般由后端程序员来维护*/


    //hash路由

    //监听url地址的改变
    //思路：用hashchange事件 监听url地址中hash值的变化，只有hash值发生改变hashchange的回调函数就会执行，在回调函数内部获取最新的hash值（location.hash），使用switch或者if来判断，根据不同的hash值调用不同的函数，完成内容的渲染
    window.onhashchange = function () {
        // console.log(location.hash);
        switch (location.hash) {
            case "#/home":
                home_page()
                break;
            case "#/service":
                service_page()
                break;
            case "#/mine":
                mine_page()
                break;
        }
    }
    //渲染首页的内容
    function home_page() {
        document.querySelector('.content').innerHTML = '首页的内容'
    }
    //渲染服务的内容
    function service_page() {
        document.querySelector('.content').innerHTML = '服务的内容'
    }
    //渲染个人中心的内容
    function mine_page() {
        document.querySelector('.content').innerHTML = '个人中心的内容'
    }



    //history路由

    //思路：点击不同的按钮，通过history.pushState（）切换不同的路由地址，然后跟据不同的路由地址调用不同的函数，渲染不同的内容

    // var as = document.querySelectorAll('a')
    // as.forEach((item) => {
    //     item.onclick = function (e) {
    //         e.preventDefault()//阻止a标签的默认行为（跳转到其他页面）
    //         //或者 return false

    //         //借助history对象的pushState()方法，添加一个历史记录
    //         history.pushState({}, '', this.href)//this.href获取到是 当前点击的a标签的href值

    //         //根据不同url渲染不同的内容
    //         switch (location.pathname) {
    //             case '/home':
    //                 home_page()
    //                 break;
    //             case '/service':
    //                 service_page()
    //                 break;
    //             case '/mine':
    //                 mine_page()
    //                 break;
    //         }
    //     }
    // })
    //渲染首页的内容
    function home_page() {
        document.querySelector('.content').innerHTML = '首页的内容'
    }
    //渲染服务的内容
    function service_page() {
        document.querySelector('.content').innerHTML = '服务的内容'
    }
    //渲染个人中心的内容
    function mine_page() {
        document.querySelector('.content').innerHTML = '个人中心的内容'
    }
</script>